<template>
  <div>
    <div id="slider">
      <div class="window" @mouseover="stop" @mouseleave="play">
        <ul class="container" :style="containerStyle">
          <li>
            <img :style="{width:imgWidth+'px'}" :src="imgs[imgs.length - 1]" alt>
          </li>
          <li v-for="(item, index) in imgs" :key="index">
            <img :style="{width:imgWidth+'px'}" :src="item" alt>
          </li>
          <li>
            <img :style="{width:imgWidth+'px'}" :src="imgs[0]" alt>
          </li>
        </ul>
        <ul class="direction">
          <li class="left" @click="move(imgWidth, 1, speed)">
            <div class="anglel"></div>
            <div class="anglel anglelWp"></div>
          </li>
          <li class="right" @click="move(imgWidth, -1, speed)">
            <div class="angler"></div>
            <div class="angler anglerWp"></div>
          </li>
        </ul>
        <ul class="dots">
          <li
            v-for="(dot, i) in imgs"
            :key="i"
            :class="{dotted: i === (currentIndex-1)}"
            @click="jump(i+1)"
          ></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "slider",
  props: {
    initialSpeed: {
      type: Number,
      default: 30
    },
    initialInterval: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      imgs: [
       "https://pic.flnet.com/public/images/2b/a6/3f/a1d7c10a10d9fa6fbb29aaae7e53a123aed8306c.jpg?1564973047#w",
        "http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658",
        "http://img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658",
        "http://img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-ACFJ9G_fw658",
        "http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658"
        ],
      imgWidth: 600,
      currentIndex: 1,
      distance: -600,
      transitionEnd: true,
      speed: this.initialSpeed
    };
  },
  computed: {
    containerStyle() {
      return {
        transform: `translateX(${this.distance}px)`
      };
    },
    interval() {
      return this.initialInterval * 1000;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.play();
      onblur = function() {
        this.stop();
      }.bind(this);
      onfocus = function() {
        this.play();
      }.bind(this);
    },
    move(offset, direction, speed) {
      console.log(speed);
      if (!this.transitionEnd) return;
      this.transitionEnd = false;
      direction === -1
        ? (this.currentIndex += offset / 600)
        : (this.currentIndex -= offset / 600);
      if (this.currentIndex > 5) this.currentIndex = 1;
      if (this.currentIndex < 1) this.currentIndex = 5;

      const destination = this.distance + offset * direction;
      this.animate(destination, direction, speed);
    },
    animate(des, direc, speed) {
      if (this.temp) {
        clearInterval(this.temp);
        this.temp = null;
      }
      this.temp = setInterval(() => {
        if (
          (direc === -1 && des < this.distance) ||
          (direc === 1 && des > this.distance)
        ) {
          this.distance += speed * direc;
        } else {
          this.transitionEnd = true;
          clearInterval(this.temp);
          this.distance = des;
          (des < -3000) ? this.distance = -600 : null;
          (des > -600) ? this.distance = -3000 : null;
        }
      }, 20);
    },
    jump(index) {
      const direction = index - this.currentIndex >= 0 ? -1 : 1;
      const offset = Math.abs(index - this.currentIndex) * 600;
      const jumpSpeed =
        Math.abs(index - this.currentIndex) === 0
          ? this.speed
          : Math.abs(index - this.currentIndex) * this.speed;
      this.move(offset, direction, jumpSpeed);
    },
    play() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.timer = setInterval(() => {
        this.move(600, -1, this.speed);
      }, this.interval);
    },
    stop() {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
#slider {
  text-align: center;
}
.window {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.container {
  display: flex;
  position: absolute;
}
.left,
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
}
.left {
  left: 3%;
  padding-left: 12px;
  padding-top: 10px;
}
.right {
  right: 3%;
  padding-right: 12px;
  padding-top: 10px;
}
img {
  user-select: none;
}
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.dots li {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 3px;
  border: 1px solid white;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
}
.dots .dotted {
  background-color: orange;
}
.anglel{
  border: 12px solid transparent;
  border-right-color: #fff;
  position: absolute;
  top: 24%;
  left: 13%;
}
.anglelWp{
  left: 17%;
  border-right-color: #000;
}
.angler{
  border: 12px solid transparent;
  border-left-color: #fff;
  position: absolute;
  top: 24%;
  right: 13%;
}
.anglerWp{
  right: 17%;
  border-left-color: #000;
}
</style>
